<template>
  <a-modal
    v-model:visible="visible"
    title="提交处理记录"
    :width="500"
    @ok="onSave"
    @cancel="cancel"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :label-col="{ style: 'width: 100px' }"
    >
      <a-form-item label="处理记录" required name="content">
        <a-textarea
          v-model:value="formState.content"
          placeholder="请输入"
          :maxlength="300"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
// api
import { postAbnormalSubmit } from "@/api/system";

import { useEditModal } from "@/hooks/useEditModal";
import { message } from "ant-design-vue";

const props = defineProps({
  type: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits(["ok"]);
const formData = reactive({
  id: "",
  content: ""
});
const { visible, formRef, formState } = useEditModal(props, formData);

const onSave = () => {
  formRef.value
    .validate()
    .then(() => {
      postAbnormalSubmit(formState).then(() => {
        message.success("提交成功");
        formRef.value.resetFields();
        visible.value = false;
        emit("ok");
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const cancel = () => {
  formRef.value.resetFields();
};

defineExpose({
  visible,
});
</script>

<style scoped lang="less"></style>
